<template>
    <!-- 食物列表子组件 -->
    <!-- 判断index是否等于0，因为数据中，只有第一个也就是点菜页面会有数据，当index等于0的时候就使用数据显示食物，
    当index不等于0的时候，就只显显示商家及评价页面的data，主要还是对数据的处理 -->
    <div class="food_list" v-if="index===0">
        <!--  TreeSelect分类  item：是要显示的数据 -->
        <!-- 属性说明：click-nav点击左侧导航的时触发  :main-active-index.sync：左侧选项中项的索引（vant3写法）vant4：v-model:main-active-index-->
        <!--  main-active-index.sync="active"改变属性-->
        <van-tree-select  :items="items" height="80vw" :main-active-index.sync="active" @click-nav="navClick">
            <template #content>
                <!-- 显示左边  TreeSelect分类列表 subItem是处理后只有标题的数组-->
                <div v-for="(item,index) in subItem" class="item_bg">
                    <!-- 使用子组件 显示食物添加框的信息 -->
                    <!-- 向子组件传递事件 -->
                    <Store_add :item="item" :showAdd="true" :addClick="addClick" :onChange="onChange"></Store_add>
                </div>
            </template>
        </van-tree-select>
    </div>
    <!-- 当index不等于0的时候，也就是显示商家和评价页面的时候展示的是这两个数据的data里面的content数据 -->
    <div v-else>{{ foodData.content }}</div>
</template>
<script>
// 引用方法
import { toRefs,reactive } from 'vue';
import { defineComponent } from 'vue';
import Store_add from '../../components/Store_add.vue';
export default defineComponent({
    name: 'App',
    // 接收数据
    props: ['index','foodData'],
    // 引入子组件
    components:{
        Store_add
    },
    setup(props){
        // console.log(props.foodData);可以通过调试显示数据进行数据处理
        // props是接收的数据
        // 对数据进行深层次的响应式处理
        let data =reactive({
            active:0,    //左侧选项中项的索引
            items:[],  //包含TreeSelect分类列表左边标签 的名称 
            subItem:[], //包含食物的信息
        });
        // 函数 ：初始化数据，即获取数据，刷新数据
        const init = ()=>{
            // 创建一个新的列表
            let newList = [];
            // 判断是否能接收到数据
            // map方法：将数组中的每个元素都执行一次后面的函数;然后返回一个新的数组
            props.foodData?.items?.map((item,index)=>{
                // 在创建的新的列表中添加text对象，存储食物的名称，push方法是在元素后添加
                newList.push({text:item.text});
                if(data.active ===index){
                    data.subItem = item.children;
                }
            });
            // 然后把新建的数组传给items数据
            data.items = newList;

        };
        // 点击事件 
        const navClick = (index)=>{
            data.active = index;
            init();
        }
        // 调用init函数，对数据进行初始化
        init();
        // 点击让步进器显示
        // 获取到点击事件的那个食物数据的id
        const addClick = (id)=>{
            data.subItem.forEach((item)=>{
                if(item.id ===id){
                    item.add = false;  //点击红色十字按钮的时候，改成false，让红色加号按钮不显示
                    item.num =1;  //修改商品数量为1
                }
            });
        }
        // 步进器增加事件
        const onChange = (value,detail)=>{
            data.subItem.forEach((item)=>{
                if(item.id ===detail.name){
                    item.num = value;
                }
            })
        }
        return{
            // 暴露数据并绑定数据，即处理数据成为响应式数据
            ...toRefs(data),
            // 暴露点击事件触发的处理函数
            navClick,
            // 暴露事件
            addClick,
            onChange

        }
    }

})
</script>

<style lang="less" scoped>
.food_list{
    margin-top: 20px;
    .item_bg{
        padding: 10px;
    }
}
    
</style>